<script setup lang="ts">
import { onMounted, ref } from 'vue';
import Footer from '../components/Footer.vue';
import FloatBar from '../components/FloatBar.vue';
import addressConfig from '../config/address';

const mapStatus = ref({
  loading: false,
  error: ''
});

const loadTianDiTu = () => {
  return new Promise<void>((resolve, reject) => {
    mapStatus.value.loading = true;
    mapStatus.value.error = '';
    
    const link = document.createElement('link');
    link.rel = 'stylesheet';
    link.href = 'https://api.tianditu.gov.cn/api?v=4.0&tk=a082bb4a55cddf569259910a69fbb98c';
    document.head.appendChild(link);
    
    const script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://api.tianditu.gov.cn/api?v=4.0&tk=a082bb4a55cddf569259910a69fbb98c';
    
    script.onload = () => {
      mapStatus.value.loading = false;
      resolve();
    };
    
    script.onerror = () => {
      mapStatus.value.loading = false;
      mapStatus.value.error = '地图加载失败，请稍后重试';
      reject(new Error('地图加载失败'));
    };
    
    document.head.appendChild(script);
  });
};

onMounted(async () => {
  try {
    await loadTianDiTu();
    
    // 初始化天地图
    const map = new window.T.Map('map-container');
    map.centerAndZoom(new window.T.LngLat(addressConfig.coordinates.lng, addressConfig.coordinates.lat), 10);
    
    // 添加缩放控件
    const zoomCtrl = new window.T.Control.Zoom();
    map.addControl(zoomCtrl);

    // 添加标记点
    const marker = new window.T.Marker(new window.T.LngLat(addressConfig.coordinates.lng, addressConfig.coordinates.lat));
    map.addOverLay(marker);
  } catch (error) {
    console.error('地图初始化失败:', error);
    mapStatus.value.error = '地图加载失败，请稍后重试';
  }
});
</script>

<template>
  <div class="contact">
    <section class="banner">
      <div class="container">
        <img src="https://img1.hijs.cc/xubai/images/banner/contact.jpg" alt="联系我们banner" class="img-fluid">
      </div>
    </section>
    <section class="contact-info">
      <div class="container">
        <div class="row">
          <div class="col-md-6">
            <div class="info-card">
              <h2>联系方式</h2>
              <ul class="list-unstyled">
                <li>
                  <strong>地址：</strong>
                  <p>{{ addressConfig.address }}</p>
                </li>
                <li>
                  <strong>电话：</strong>
                  <p>{{ addressConfig.phone }}</p>
                </li>
                <li>
                  <strong>邮箱：</strong>
                  <p>{{ addressConfig.email }}</p>
                </li>
              </ul>
            </div>
          </div>
          <div class="col-md-6">
            <div class="map-card">
              <div class="map-container" id="map-container">
                <div v-if="mapStatus.loading" class="map-loading">
                  <div class="spinner-border text-primary" role="status">
                    <span class="visually-hidden">加载中...</span>
                  </div>
                </div>
                <div v-if="mapStatus.error" class="map-error alert alert-danger">
                  {{ mapStatus.error }}
                </div>
              </div>
            </div>
          </div>
        </div>


      </div>
    </section>

    

    <Footer />
    <FloatBar />
  </div>
</template>

<style scoped>
.contact-info {
  padding: 60px 0;
}

.info-card, .map-card {
  background: #f8f9fa;
  padding: 30px;
  border-radius: 8px;
  height: 100%;
}

.info-card h2 {
  margin-bottom: 20px;
}

.info-card ul li {
  margin-bottom: 15px;
}

.info-card ul li strong {
  display: block;
  margin-bottom: 5px;
  color: #333;
}

.map-card {
  height: 100%;
}

.map-container {
  width: 100%;
  height: 400px;
  border-radius: 8px;
  overflow: hidden;
  position: relative;
}

@media (max-width: 768px) {
  .info-card {
    margin-bottom: 30px;
  }
  
  .map-container {
    height: 300px;
  }
}

.map-loading,
.map-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  background: rgba(255, 255, 255, 0.9);
  padding: 20px;
  border-radius: 8px;
}
.banner {
  padding: 60px 0;
  background: #f8f9fa;
  margin-top: 60px;
}

@media (max-width: 768px) {
  .banner {
    margin-top: 40px;
    padding-bottom: 5px;
  }
}
</style>